<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度网盘目录同步助手</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.3/css/layui.min.css">
    <style>
        :root {
            --primary: #1E9FFF;
            --primary-light: #a0d7ff;
            --success: #5FB878;
            --warning: #FFB800;
            --danger: #FF5722;
            --dark: #394456;
            --light: #f8f9fa;
            --gray: #6c757d;
            --border: #e9ecef;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f4 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            padding-top: 20px;
        }

        .header h1 {
            font-size: 2.5rem;
            color: #2c3e50;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.1rem;
            color: #7f8c8d;
            max-width: 700px;
            margin: 0 auto;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
        }

        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
            }
        }

        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .card-header {
            background: linear-gradient(135deg, var(--primary) 0%, #2980b9 100%);
            color: white;
            padding: 18px 25px;
            font-size: 1.4rem;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 600;
        }

        .card-body {
            padding: 25px;
            flex-grow: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .file-explorer {
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .explorer-header {
            padding: 15px;
            background: var(--light);
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
        }

        .path-info {
            display: flex;
            align-items: center;
            font-size: 0.95rem;
            color: var(--gray);
        }

        .path-info i {
            margin-right: 8px;
        }

        .actions {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 8px 15px;
            border-radius: 6px;
            border: none;
            background: var(--light);
            color: var(--gray);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn:hover {
            background: var(--primary-light);
            color: var(--primary);
        }

        .btn-primary {
            background: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background: #0d8aee;
        }

        .explorer-body {
            flex-grow: 1;
            overflow-y: auto;
            height: 300px;
            padding: 10px 5px;
        }

        .directory-content {
            list-style: none;
        }

        .file-item {
            padding: 10px 15px;
            display: flex;
            align-items: center;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .file-item:hover {
            background: rgba(30, 159, 255, 0.08);
        }

        .file-icon {
            width: 30px;
            height: 30px;
            background: var(--primary-light);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: var(--primary);
        }

        .file-name {
            flex-grow: 1;
            font-weight: 500;
        }

        .file-actions {
            display: flex;
            gap: 8px;
        }

        .selected-section {
            margin-top: 20px;
        }

        .section-title {
            font-size: 1.1rem;
            margin-bottom: 15px;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .selected-items {
            border: 1px dashed var(--primary);
            border-radius: 8px;
            padding: 15px;
            background: rgba(30, 159, 255, 0.03);
            min-height: 100px;
            max-height: 200px;
            overflow-y: auto;
        }

        .selected-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid var(--border);
        }

        .remove-btn {
            color: var(--danger);
            cursor: pointer;
            padding: 0 5px;
        }

        .empty-state {
            text-align: center;
            padding: 30px 0;
            color: var(--gray);
        }

        .empty-state i {
            font-size: 3rem;
            color: #dce1e6;
            margin-bottom: 15px;
        }

        .upload-section {
            padding: 20px 0;
        }

        .status-bar {
            background: var(--light);
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            border: 1px solid var(--border);
        }

        .progress-container {
            display: none;
        }

        .progress-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .progress-wrapper {
            height: 12px;
            background: #e9ecef;
            border-radius: 6px;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, var(--primary), var(--success));
            border-radius: 6px;
            width: 0%;
            transition: width 0.4s ease;
        }

        .file-info {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            color: var(--gray);
            margin-top: 5px;
        }

        .upload-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 25px;
            padding-top: 15px;
            border-top: 1px solid var(--border);
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            border-radius: 8px;
            background: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 10px;
            transform: translateX(150%);
            transition: transform 0.4s ease;
            z-index: 1000;
        }

        .notification.show {
            transform: translateX(0);
        }

        .notification i {
            font-size: 1.5rem;
        }

        .notification-success {
            color: var(--success);
            border-left: 4px solid var(--success);
        }

        .notification-error {
            color: var(--danger);
            border-left: 4px solid var(--danger);
        }

        .spinner {
            display: inline-block;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .item-dir {
            background-color: rgba(30, 159, 255, 0.05);
            border-left: 3px solid var(--primary);
        }
    </style>
</head>
<body>
<div class="header">
    <h1><i class="fas fa-folder-tree"></i>百度网盘目录同步助手</h1>
    <p>选择本地目录并同步到百度网盘的指定位置</p>
</div>

<div class="container">
    <!-- 左侧：本地文件浏览器 -->
    <div class="card">
        <div class="card-header">
            <i class="fas fa-folder"></i>本地文件系统
        </div>
        <div class="card-body">
            <div class="file-explorer">
                <div class="explorer-header">
                    <div class="path-info">
                        <i class="fas fa-folder-open"></i>
                        <span id="localPath">正在加载...</span>
                    </div>
                    <div class="actions">
                        <button class="btn" id="btnBackLocal" disabled>
                            <i class="fas fa-arrow-left"></i> 返回上级
                        </button>
                    </div>
                </div>
                <div class="explorer-body" id="localExplorer">
                    <div class="empty-state">
                        <i class="fas fa-spinner spinner"></i>
                        <p>正在加载本地文件系统...</p>
                    </div>
                </div>
            </div>

            <div class="selected-section">
                <div class="section-title">
                    <i class="fas fa-folder"></i>
                    <span>已选择的目录</span>
                </div>
                <div class="selected-items" id="selectedDirectory">
                    <div class="empty-state">
                        <i class="fas fa-folder-open"></i>
                        <p>请从左侧选择一个目录</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧：百度网盘文件浏览器 -->
    <div class="card">
        <div class="card-header">
            <i class="fas fa-cloud"></i>百度网盘
        </div>
        <div class="card-body">
            <div class="file-explorer">
                <div class="explorer-header">
                    <div class="path-info">
                        <i class="fas fa-folder-open"></i>
                        <span id="panPath">正在加载...</span>
                    </div>
                    <div class="actions">
                        <button class="btn" id="btnBackPan" disabled>
                            <i class="fas fa-arrow-left"></i> 返回上级
                        </button>
                    </div>
                </div>
                <div class="explorer-body" id="panExplorer">
                    <div class="empty-state">
                        <i class="fas fa-spinner spinner"></i>
                        <p>正在加载百度网盘目录...</p>
                    </div>
                </div>
            </div>

            <div class="selected-section">
                <div class="section-title">
                    <i class="fas fa-folder"></i>
                    <span>上传目标位置</span>
                </div>
                <div class="selected-items" id="targetLocation">
                    <div class="empty-state">
                        <i class="fas fa-location-arrow"></i>
                        <p>请从右侧选择上传的目标位置</p>
                    </div>
                </div>
            </div>

            <div class="upload-section">
                <div class="status-bar">
                    <div class="progress-container" id="progressContainer">
                        <div class="progress-info">
                            <span>上传进度</span>
                            <span id="progressPercent">0%</span>
                        </div>
                        <div class="progress-wrapper">
                            <div class="progress-bar" id="progressBar"></div>
                        </div>
                        <div class="file-info">
                            <span id="currentFile">正在准备上传...</span>
                            <span id="fileCounter">0/0</span>
                        </div>
                    </div>

                    <div id="statusMessage">
                        请选择要同步的目录和目标位置
                    </div>
                </div>

                <div class="upload-actions">
                    <button class="btn btn-primary" id="btnUpload">
                        <i class="fas fa-sync-alt"></i> 开始同步
                    </button>
                    <button class="btn" id="btnReset">
                        <i class="fas fa-redo"></i> 重置
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="notification notification-success" id="successNotification">
    <i class="fas fa-check-circle"></i>
    <div>目录已成功同步到百度网盘！</div>
</div>

<div class="notification notification-error" id="errorNotification">
    <i class="fas fa-exclamation-triangle"></i>
    <div id="errorMessage">同步过程中发生错误！</div>
</div>

<script>
    // 全局变量
    const API = {
        localFiles: "/baidu/pan/file/upload/nodes",
        upload: "/baidu/pan/file/upload/upload",
        panFiles: "/baidu/pan/rest/2.0/xpan/file/getListData"
    };

    let selectedDirectory = null;
    let selectedPanDir = null;
    let currentLocalPath = '';
    let currentPanPath = '/';

    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化文件浏览器
        loadLocalFiles();
        loadPanFiles();

        // 绑定按钮事件
        document.getElementById('btnBackLocal').addEventListener('click', goBackLocal);
        document.getElementById('btnBackPan').addEventListener('click', goBackPan);
        document.getElementById('btnUpload').addEventListener('click', startUpload);
        document.getElementById('btnReset').addEventListener('click', resetSelection);
    });

    // 加载本地文件
    function loadLocalFiles(path) {
        currentLocalPath = path || '';
        const url = currentLocalPath ?
            `${API.localFiles}?path=${encodeURIComponent(currentLocalPath)}` :
            API.localFiles;

        document.getElementById('localPath').textContent = currentLocalPath || '根目录';
        document.getElementById('btnBackLocal').disabled = !path;
        document.getElementById('localExplorer').innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-spinner spinner"></i>
                    <p>正在加载目录内容...</p>
                </div>
            `;

        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`请求失败: ${response.status} ${response.statusText}`);
                }
                return response.json();
            })
            .then(files => {
                // 过滤只显示目录
                const directories = files.filter(item => item.isDir);
                renderLocalFiles(directories);
            })
            .catch(error => {
                showError('加载本地目录失败: ' + error.message);
            });
    }

    // 渲染本地目录
    function renderLocalFiles(directories) {
        const explorer = document.getElementById('localExplorer');

        if (!directories || directories.length === 0) {
            explorer.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-folder-open"></i>
                        <p>此目录下没有子目录</p>
                    </div>
                `;
            return;
        }

        let html = '<ul class="directory-content">';

        // 添加返回上级选项
        if (currentLocalPath) {
            const parentPath = getParentPath(currentLocalPath);
            html += `
                    <li class="file-item item-dir" onclick="loadLocalFiles('${parentPath}')">
                        <div class="file-icon">
                            <i class="fas fa-level-up-alt"></i>
                        </div>
                        <div class="file-name">返回上级</div>
                    </li>
                `;
        }

        // 添加目录项
        directories.forEach(dir => {
            // 排除返回上级按钮
            if (!dir.name.includes('返回上级')) {
                html += `
                        <li class="file-item item-dir">
                            <div class="file-icon" onclick="loadLocalFiles('${dir.id}')">
                                <i class="fas fa-folder"></i>
                            </div>
                            <div class="file-name" onclick="loadLocalFiles('${dir.id}')">${dir.name}</div>
                            <div class="file-actions">
                                <button class="btn" onclick="selectDirectory('${dir.id}', '${dir.name}')">
                                    <i class="fas fa-check"></i> 选择
                                </button>
                            </div>
                        </li>
                    `;
            }
        });

        html += '</ul>';
        explorer.innerHTML = html;
    }

    // 选择本地目录
    function selectDirectory(dirId, dirName) {
        selectedDirectory = {
            id: dirId,
            name: dirName
        };

        renderSelectedDirectory();
        showNotification('info', `已选择目录: ${dirName}`);
    }

    // 渲染已选目录
    function renderSelectedDirectory() {
        const container = document.getElementById('selectedDirectory');

        if (!selectedDirectory) {
            container.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-folder-open"></i>
                        <p>请从左侧选择一个目录</p>
                    </div>
                `;
            return;
        }

        container.innerHTML = `
                <div class="selected-item">
                    <div>
                        <i class="fas fa-folder" style="color:#FFB800;"></i>
                        <strong>${selectedDirectory.name}</strong>
                        <div style="font-size: 0.8rem; color: var(--gray); margin-top: 5px;">
                            ${selectedDirectory.id}
                        </div>
                    </div>
                    <div class="remove-btn" onclick="clearSelectedDirectory()">
                        <i class="fas fa-times"></i>
                    </div>
                </div>
            `;
    }

    // 清除选择的本地目录
    function clearSelectedDirectory() {
        selectedDirectory = null;
        renderSelectedDirectory();
    }

    // 加载百度网盘目录
    function loadPanFiles(path) {
        currentPanPath = path || '/';
        const url = `${API.panFiles}?dir=${encodeURIComponent(currentPanPath)}&folder=1`;

        document.getElementById('panPath').textContent = currentPanPath;
        document.getElementById('btnBackPan').disabled = currentPanPath === '/';
        document.getElementById('panExplorer').innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-spinner spinner"></i>
                    <p>正在加载网盘目录...</p>
                </div>
            `;

        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`请求失败: ${response.status} ${response.statusText}`);
                }
                return response.json();
            })
            .then(data => {
                renderPanFiles(data.data);
            })
            .catch(error => {
                showError('加载百度网盘目录失败: ' + error.message);
            });
    }

    // 渲染百度网盘目录
    function renderPanFiles(dirs) {
        const explorer = document.getElementById('panExplorer');

        if (!dirs || dirs.length === 0) {
            explorer.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-folder-open"></i>
                        <p>此目录为空</p>
                    </div>
                `;
            return;
        }

        let html = '<ul class="directory-content">';

        // 添加返回上级选项
        if (currentPanPath !== '/') {
            const parentPath = getParentPath(currentPanPath);
            html += `
                    <li class="file-item item-dir" onclick="loadPanFiles('${parentPath}')">
                        <div class="file-icon">
                            <i class="fas fa-level-up-alt"></i>
                        </div>
                        <div class="file-name">返回上级</div>
                    </li>
                `;
        }

        // 添加目录项
        dirs.forEach(dir => {
            const dirName = dir.path.split('/').pop();
            const dirId = dir.path;

            html += `
                    <li class="file-item item-dir">
                        <div class="file-icon" onclick="loadPanFiles('${dirId}')">
                            <i class="fas fa-folder"></i>
                        </div>
                        <div class="file-name" onclick="loadPanFiles('${dirId}')">${dirName}</div>
                        <div class="file-actions">
                            <button class="btn" onclick="selectPanDir('${dirId}', '${dirName}')">
                                <i class="fas fa-check"></i> 选择
                            </button>
                        </div>
                    </li>
                `;
        });

        html += '</ul>';
        explorer.innerHTML = html;
    }

    // 选择百度网盘目录
    function selectPanDir(dirId, dirName) {
        selectedPanDir = {
            id: dirId,
            name: dirName
        };

        renderTargetLocation();
        showNotification('info', `已选择目标位置: ${dirName}`);
    }

    // 渲染目标位置
    function renderTargetLocation() {
        const container = document.getElementById('targetLocation');

        if (!selectedPanDir) {
            container.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-location-arrow"></i>
                        <p>请选择目标位置</p>
                    </div>
                `;
            return;
        }

        container.innerHTML = `
                <div class="selected-item">
                    <div>
                        <i class="fas fa-folder" style="color:#1E9FFF;"></i>
                        <strong>${selectedPanDir.name}</strong>
                        <div style="font-size: 0.8rem; color: var(--gray); margin-top: 5px;">
                            ${selectedPanDir.id}
                        </div>
                    </div>
                    <div class="remove-btn" onclick="clearPanDir()">
                        <i class="fas fa-times"></i>
                    </div>
                </div>
            `;
    }

    // 清除目标位置
    function clearPanDir() {
        selectedPanDir = null;
        renderTargetLocation();
    }

    // 开始上传
    function startUpload() {
        if (!selectedDirectory) {
            showNotification('error', '请选择要同步的目录');
            return;
        }

        if (!selectedPanDir) {
            showNotification('error', '请选择百度网盘目标位置');
            return;
        }

        // 显示进度
        const progressContainer = document.getElementById('progressContainer');
        const statusMessage = document.getElementById('statusMessage');

        progressContainer.style.display = 'block';
        statusMessage.style.display = 'none';

        // 上传目录
        uploadDirectory();
    }

    // 上传整个目录
    function uploadDirectory() {
        // 显示进度
        updateProgress(0, 1);
        document.getElementById('currentFile').textContent = `正在同步整个目录: ${selectedDirectory.name}`;

        // 构建API URL
        const url = `${API.upload}?panDir=${encodeURIComponent(selectedPanDir.id)}&localFiles=${encodeURIComponent(selectedDirectory.id)}`;

        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`上传失败: ${response.status} ${response.statusText}`);
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // 模拟上传进度完成
                    setTimeout(() => {
                        updateProgress(1, 1);
                        document.getElementById('currentFile').textContent = '目录同步完成';
                        showNotification('success', '目录已成功同步到百度网盘');
                    }, 1500);
                } else {
                    showError('目录同步失败: ' + data.message);
                }
            })
            .catch(error => {
                showError('目录同步失败: ' + error.message);
            });
    }

    // 更新进度条
    function updateProgress(completed, total) {
        const percent = Math.round((completed / total) * 100);

        document.getElementById('progressBar').style.width = `${percent}%`;
        document.getElementById('progressPercent').textContent = `${percent}%`;
        document.getElementById('fileCounter').textContent = `${completed}/${total}`;
    }

    // 重置选择
    function resetSelection() {
        selectedDirectory = null;
        selectedPanDir = null;
        renderSelectedDirectory();
        renderTargetLocation();

        const progressContainer = document.getElementById('progressContainer');
        const statusMessage = document.getElementById('statusMessage');

        progressContainer.style.display = 'none';
        statusMessage.style.display = 'block';
        document.getElementById('progressBar').style.width = '0%';

        showNotification('info', '选择已重置');
    }

    // 获取上级目录
    function getParentPath(path) {
        if (!path || path === '/') return '';

        const trimmedPath = path.endsWith('/') ?
            path.slice(0, -1) : path;

        const lastSlashIndex = trimmedPath.lastIndexOf('/');

        if (lastSlashIndex === 0) return '/';
        if (lastSlashIndex > 0) return trimmedPath.substring(0, lastSlashIndex);

        return '';
    }

    // 返回本地文件上级
    function goBackLocal() {
        if (!currentLocalPath) return;
        const parentPath = getParentPath(currentLocalPath);
        loadLocalFiles(parentPath);
    }

    // 返回网盘上级
    function goBackPan() {
        if (currentPanPath === '/') return;
        const parentPath = getParentPath(currentPanPath);
        loadPanFiles(parentPath);
    }

    // 显示通知
    function showNotification(type, message) {
        const notification = type === 'success' ?
            document.getElementById('successNotification') :
            document.getElementById('errorNotification');

        const messageEl = notification.querySelector('div');

        if (!notification) return;

        messageEl.textContent = message;
        notification.classList.add('show');

        setTimeout(() => {
            notification.classList.remove('show');
        }, 3000);
    }

    // 显示错误
    function showError(message) {
        document.getElementById('errorMessage').textContent = message;
        document.getElementById('errorNotification').classList.add('show');

        setTimeout(() => {
            document.getElementById('errorNotification').classList.remove('show');
        }, 5000);
    }
</script>
</body>
</html>